<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h5拖拽</title>
</head>
<style>
    #demo{
        margin: 20px;
    }
    #demo .panel-list{
        overflow: hidden;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #demo .panel-item{
        float: left;
        margin-right: 30px;
        width: 100px;
        height: 100px;
        background: #ddd;
        border: 1px solid #ddd;
    }
    #demo-src{
        display: inline-block;
        width: 50px;
        height: 50px;
        background: purple;
    }
    #demo .over{
        border: 1px dashed #000;
        transform: scale(0.8,0.8);
    }
</style>
<body>
    <div id="demo">
        <ul class="panel-list">
            <li class="panel-item"></li>
            <li class="panel-item"></li>
            <li class="panel-item"></li>
            <li class="panel-item"></li>
            <li class="panel-item"></li>
        </ul>
        <h2>拖拽下面的方块到上面任意容器中</h2>
        <!--设置draggable使元素成为可拖拽元素-->
        <span class="movable" id="demo-src" draggable="true"></span>
    </div>
</body>
<script>
    var inital=function(){
        var dnd={
            // 初始化
            init:function(){
                var me=this
                // 拖拽元素
                me.src=document.querySelector('#demo-src')
                // 容器
                me.panelList=document.querySelector('.panel-list')
                // 监听事件  （名，函数，默认false 冒泡阶段 true 捕获阶段）
                // 拖拽鼠标移入元素，在拖放目标上设置视觉反馈
                me.panelList.addEventListener('dragenter',me.onDragEnter,false)
             
                me.panelList.addEventListener('dragleave',me.onDragLeave,false)
                // 取消元素dragover默认行为，使其可拖放
                me.panelList.addEventListener('drop',me.onDrop,false)
                   me.panelList.addEventListener('dragover',me.onDragOver,false)

            },
            onDragEnter:function(e){
                // console.log('enter')
                if(e.target.classList.contains('panel-item')){
                    e.target.classList.add('over')
                }
            },
            onDragOver:function(e){
                // console.log('over')
                e.preventDefault()
            },
            onDragLeave:function(e){
                // console.log('leave')
                 if(e.target.classList.contains('panel-item')){
                    e.target.classList.remove('over')
                }
            },
            onDrop:function(e){
                // console.log('drop')
                var src=document.getElementById('demo-src')
                var target=e.target
                if(target.classList.contains('panel-item')){
                    target.appendChild(src)
                    target.classList.remove('over')
                }
            },
            
        }
        dnd.init()
    }
    inital()
</script>
</html>